<template>
	<div style="padding-bottom: 50px; height: 100%; background-color: #fff">
		<van-search
			v-model="data.keyword"
			placeholder="请输入关键词"
			style="height: 50px"
			@search="handleGetArticleList"
		/>
		<van-tabs v-model:active="data.typeId" @change="handleGetArticleList">
			<van-tab
				v-for="item in data.typeList"
				:key="item.id"
				:name="item.id"
				:title="item.title"
			>
				<van-empty
					v-if="!data.articleList.length"
					description="内容为空"
				/>
				<Waterfall
					v-else
					:list="data.articleList"
					:breakpoints="{
						1200: { rowPerView: 3 },
						800: { rowPerView: 2 },
						500: { rowPerView: 2 },
					}"
				>
					<template #item="{ item }">
						<div
							class="water-container"
							@click="handleToDetail(item)"
						>
							<LazyImg
								:url="'http://localhost:3000/' + item.cover"
							/>
							<p class="water-title">{{ item.title }}</p>
						</div>
					</template>
				</Waterfall>
			</van-tab>
		</van-tabs>
	</div>
</template>

<script setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import {
	getExtendArticleTypeList,
	getArticleByTypeAndKeyword,
} from "@/api/basic";

const router = useRouter();
const data = reactive({
	typeId: "",
	typeList: [],
	keyword: "",
	articleList: [],
});

const handleGetTypeList = async () => {
	const res = await getExtendArticleTypeList();
	data.typeList = res.result.list;
	if (data.typeList.length) {
		data.typeId = data.typeList[0].id;
		handleGetArticleList();
	}
};
handleGetTypeList();

const handleGetArticleList = async () => {
	const res = await getArticleByTypeAndKeyword({
		keyword: data.keyword,
		typeId: data.typeId,
	});
	data.articleList = res.result.list;
};

const handleToDetail = item => {
	router.push({
		path: "/extendArticleDetail",
		query: {
			id: item.id,
		},
	});
};
</script>
<style scoped></style>
